<div id="myCarousel" class="carousel slide" style="width: 100%;">
  <!-- Carousel items -->
  <div id="avatar_carousel" class="carousel-inner fadebgbright" style="min-height: 21em">
    {% for page in images %}
    <div class="item {% if forloop.first %}active{% endif %}">
      <ul id="avatar_list_thumbnails" class="thumbnails"
        style="margin-left: 45px;margin-top: 15px;margin-bottom: 15px">
        {% for image in page %}
          <li><a href='#' class='thumbnail avatar {% if image == profile.getAvatar %}avatar-clicked{% endif %}'>
            <img src='{{ image }}' alt='' style='width:51px;height: 51px;overflow: hide'></a></li>
        {% endfor %}
      </ul>
    </div>
    {% endfor %}
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
<script type="text/javascript">
  $(document).ready(function(){
	  window.userAvatar = "{{ profile.getAvatar }}";

	  $(".avatar").click(function(){
      userAvatar = $($(this).children()[0]).attr("src");
	    if(!$(this).hasClass("avatar-clicked")){
	      $(".thumbnail").removeClass("avatar-clicked");
	      $(this).addClass("avatar-clicked");
	    }
	  });
  });
</script>